<template>
  <div class="box">
    <!-- 订单状态 -->
    <van-search v-model="searchValue" shape="round" background="red" placeholder="请输入搜索关键词"
      @keypress.native.enter="search" />
    <div v-show="isShow">
      <div class="back">
        <img :src="baseUrl+user.avatar" style="margin:20px 0 0 20px" width="70px">
        <div style="margin:-30px 0 0 100px;font-size:14px;color:#fff;">{{user.nickName}}</div>
      </div>
      <van-grid :column-num="5" :border="false">
        <van-grid-item v-for="(value,index) in list2" :key="index" :icon="value.icon" :text="value.text"
          @click="To(value.to)" />
      </van-grid>
      <div style="margin-top:10px">
        <van-cell v-for="(list, index) in list" :title="list.title" is-link :to="list.to" :icon="list.icon" :key="index"
          @click="choose(list.title)" />
      </div>
    </div>
    <div v-show="searchShow">
      <van-row>
        <van-col :span="24">
          <van-empty image="error" description="没有搜索到该商品，换个关键字试试吧" />
        </van-col>
      </van-row>
    </div>
    <div v-show="searchValueShow">
      <van-row>
        <van-col :span="23" :offset="1">
          <div style="height:100px">
            <span>最近搜索:</span>
            <div>
              <el-tag type="info" v-for="(item,index) in lately" :key="item.index" style="margin:10px 0px 2px  10px">
                {{item}}
              </el-tag>
            </div>
          </div>

        </van-col>
        <hr>
        <van-col :span="23" :offset="1">
          <span>热门搜索:</span>
          <div style="margin:10px 20px 30px  30px">
            <el-tag type="info" @click="hot">华为手机</el-tag>
          </div>
        </van-col>
      </van-row>
    </div>
    <xFooter />
  </div>
</template>

<script>
import { getMember } from "@/api/member/member"
import Vue from 'vue';
import { Dialog } from 'vant';
import { Toast } from 'vant';

// 全局注册
Vue.use(Dialog);
export default {
  data () {
    return {
      lately: [],
      searchValue: "",
      isShow: true,
      searchShow: false,
      searchValueShow: false,
      userInfo: [],
      user: {
        id: '',
        avatar: '',
        nickName: '',
        phone: '',
        username: '',
        email: ''
      },
      list: [
        {
          title: "地址管理",
          to: "",
          icon: require("@/assets/image/导航地址.svg"),
        },
        {
          title: "我的收藏",
          to: "",
          icon: require("@/assets/image/我的收藏.svg"),
        },
        {
          title: "我的钱包",
          to: "",
          icon: require("@/assets/image/我的钱包.svg"),
        },
        {
          title: "我的足迹",
          to: "",
          icon: require("@/assets/image/我的足迹.svg"),
        },
        {
          title: "设置",
          to: "",
          icon: require("@/assets/image/我的设置.svg"),
        }, {
          title: "退出登录",
          to: "",
          icon: require("@/assets/image/退出.svg"),
        },
      ],
      list2: [
        {
          text: "未支付", icon: require("@/assets/image/未支付.svg"), to: "/order"
        },
        {
          text: "待发货", icon: require("@/assets/image/待发货.svg"), to: "/order"
        },
        {
          text: "待收货", icon: require("@/assets/image/待收货.svg"), to: "/order"
        },
        {
          text: "待评价", icon: require("@/assets/image/待评价.svg"), to: "/order"
        },
        {
          text: "已完成", icon: require("@/assets/image/已完成.svg"), to: "/order"
        },
      ]
    };
  },
  created: function () {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    if (this.userInfo == null) {
      this.$router.push("/login")
    } else {
      this.getUser()
    }
  },
  methods: {
    search () {
      if (this.lately.length < 5) {
        this.lately.push(this.searchValue)
      } else {
        return
      }
      this.isShow = false
      this.searchShow = false
      this.searchValueShow = true
    },
    hot (index) {
      this.$message.error("接口暂未开放")
    },
    choose (val) {
      if (val == "退出登录") {
        Dialog.confirm({
          title: '退出登录',
          message: '您确定要退出吗',
        })
          .then(() => {
            Toast.loading({
              forbidClick: true,
            });
            setTimeout(() => {
              Toast.clear()
              Toast.success('已退出登录');
              this.$router.push('/')
            }, 500);
            localStorage.removeItem('userInfo');
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == "地址管理") {
        this.$router.push('/contact')
      }
    },
    To (val) {
      this.$router.push(val)
    },
    getUser () {
      const id = this.userInfo.id
      getMember(id).then(res => {
        this.user = res.data
      })
    }
  },
};
</script>

<style scoped>
.box {
  height: 100%;
  background-color: #f7f7f7;
}
.back {
  background-color: #ff1a49;
  height: 120px;
  border-radius: 0 0 30px 30px;
}
</style>
